<!DOCTYPE html>
<html lang="zh-cn">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>javascript 阶段</title>
    <style>
        html,
        body {
            width: 100%;
            height: 100%;
        }

        * {
            margin: 0;
            padding: 0;
            font-family: Arial, Helvetica, sans-serif;
            box-sizing: border-box;
        }

        #container {
            position: relative;
            top: 60px;
            left: 200px;
        }

        #container .leftView {
            width: 450px;
            height: 450px;
        }

        #container .leftView .mask {
            width: 300px;
            height: 300px;
            position: absolute;
            display: none;
            cursor: move;
            top: 0;
            left: 0;
            background-color: rgba(248, 239, 109, 0.4);
        }

        #container .leftView .small {
            width: 100%;
            height: 100%;
        }

        #container .rightView {
            width: 542px;
            height: 542px;
            display: none;
            position: absolute;
            top: 0;
            left: 450px;
            overflow: hidden;
        }

        #container .rightView .big {
            position: absolute;
            top: 0;
            left: 0;
        }
    </style>
</head>

<body>
    <!-- 小盒子[450*450] > 小图片[450*450] + 遮罩层[300 * 300]-->
    <!-- 大盒子[542 * 542] > 大图片[800*800]-->
    <div id="container">
        <div class="leftView">
            <div class="mask"></div>
            <img src="./images/small.jpg" alt="" class="small">
        </div>
        <div class="rightView">
            <img src="./images/big.jpg" alt="" class="big">
        </div>
    </div>


    <script>
        // 要求:
        // 仿照京东商品详情的放大镜效果.
        // 参考地址: https://item.jd.com/67126728004.html
        ((function () {
            'use strict'
            function $(el) {
                return document.querySelector(el)
            }
            let container = $('#container')
            let leftView = $('.leftView')
            let mask = $('.mask')
            let smallImg = $('.small')
            let rightView = $('.rightView')
            let bigImg = $('.big')
            leftView.addEventListener('mouseover', function () {
                mask.style.display = 'block'
                rightView.style.display = 'block'
            }, false)
            leftView.addEventListener('mouseout', function () {
                mask.style.display = 'none'
                rightView.style.display = 'none'
            })
            leftView.addEventListener('mousemove', function (evt) {
                evt = evt || window.event
                let currentMouseX = evt.pageX
                let currentMouseY = evt.pageY
                let offsetLeft = container.offsetLeft
                let offsetTop = container.offsetTop
                let maskWidth = mask.offsetWidth
                let maskHeight = mask.offsetHeight
                let zoomMaskX = currentMouseX - offsetLeft - maskWidth / 2
                let zoomMaskY = currentMouseY - offsetTop - maskHeight / 2
                if (zoomMaskX <= 0) {
                    zoomMaskX = 0
                }
                if (zoomMaskY <= 0) {
                    zoomMaskY = 0
                }
                let maxScopeX = leftView.offsetWidth - maskWidth
                if (zoomMaskX >= maxScopeX) {
                    zoomMaskX = maxScopeX
                }
                let maxkScopeY = leftView.offsetHeight - maskHeight
                if (zoomMaskY >= maxkScopeY) {
                    zoomMaskY = maxkScopeY
                }
                mask.style.left = zoomMaskX + 'px'
                mask.style.top = zoomMaskY + 'px'
                let zommProportion = (bigImg.offsetWidth - rightView.offsetWidth) / (leftView.offsetWidth - maskWidth)
                bigImg.style.left = -zommProportion * zoomMaskX + 'px'
                bigImg.style.top = -zommProportion * zoomMaskY + 'px'
            }, false)
        })())


    </script>
</body>

</html>